<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
<link rel="stylesheet" href="https://cdn.staticfile.org/element-ui/2.15.9/theme-chalk/index.css">
  <style>
    a{
      color: black;
      text-decoration: none;
    }
    .d2>a{
      color: #ffffff;
      font-size: 16px;
      text-align: center;
      text-decoration: none;
      margin-right: 50px;
    }
    .el-card p{
        line-height: 36px;
        margin-top: 10px;
        font-size: 14px;
        color: #666666;
    }
    a:hover {
        color: #ff82ae;
    }
    .el-footer{
        width: 100%;
        background: url(imgs/footer_bg.png);
        margin-top: 85px;
        color: #fff;
    }
  </style>
</head>
<body>
<div id="app">
      <div id="d1" style="width: 1200px">
        <img src="a1.jpg" alt="" style="width: 258px;height: 65px;margin: 0 600px 0 110px">
        <el-button size="medium" style="background-color: #ff82ae;color: #fff;margin-right: 50px" @click="index()">返回首页</el-button>
        <a href="">登录/</a><a href="">注册</a>
      </div>
      <div id="d2">
        <el-menu
                mode="horizontal" background-color="#ff82ae"
                 text-color="#fff" active-text-color="#fff"
                 :default-active="activeIndex2">
          <el-menu-item index="1">预约挂号</el-menu-item>
          <el-menu-item index="2">我的预约</el-menu-item>
          <el-menu-item index="3">报告查询</el-menu-item>
        </el-menu>
        </div>
    <div id="d3">
        <img class="i1" src="a2.jpg" style="max-width: 100%;height: 100%">
    </div>
    <div style="float: right;padding: 15px 28px 0 31px">
        <el-card style=";width: 301px;height: 700px;background-color: #5c282805;margin: 0 auto">
            <div style="background-image: url('a4.jpg');background-repeat: no-repeat;padding-left: 42px">
                <label style="color:#444444;font-weight: bold;font-size: 18px">预约须知</label>
            </div>
            <p>一、预约挂号成功患者,请于就诊前一天查看预约挂号网站，确认预约订单，如医生接诊时间发生变更请拨打医院门诊咨询电话了解详情</p>
            <p>二、患者在门诊预约挂号窗口换取正式挂号票时,请出示身份证和预约订单号,由工作人员进行信息核对。</p>
            <p>三、请预约患者按照订单约定时间前往医院挂号窗口更换正时挂号票,预约时间以外视为爽约。</p>
            <p>四、预约成功后请保持手机开通方便工作人员联系。</p>
            <p>五、坐诊医生因应急、突发事件等原因可能会有变动，以当日实际坐诊医生为准，敬请谅解。</p>
        </el-card>
        <div style="margin-top: 60px;">
        <el-card style="height: 502px;margin-top: 35px;width: 301px">
            <div>
                <img src="imgs/d2.jpg">
                <label>微信扫一扫</label>
            </div>
            <div>
            <img style="width: 280px;height: 280px" src="imgs/d1.jpg">
                <p style="text-align: center;margin-top: 10px">"龙龙国际医学预约挂号平台"</p>
                <p style="text-align: center;margin-top: 10px">快速挂号</p>
            </div>
        </el-card>
        </div>
    </div>
    <div id="d4" style=";font-size: 20px;font-weight: bold;padding-top: 70px">
        <img src="a5.jpg" style="margin-right: 10px">
        <label>专家推荐</label>
    </div>
    <hr>
    <div style="width: 100%;padding-top: 18px;">
        <a style="font-size: 16px;font-weight: bold;color:#d31151;float:left;">医院</a>
        <a style="padding-left: 40px;position: relative;"
           href="">西安国际医学中心医院</a>
   </div>
    <div style="width: 100%;padding-top: 18px;">
        <a style="font-size: 16px;font-weight: bold;color:#d31151;float:left;"  >科室</a>
        <a style="padding-left: 40px;position: relative;"
           href="">全部</a>
        <a style="padding-left: 40px;position: relative;"
           href="">整形医院麻醉科诊室</a>
        <a style="padding-left: 40px;position: relative;"
           href="">皮肤科诊室</a>
        <a style="padding-left: 40px;position: relative;"
           href="">烧伤外伤诊室</a>
        <a style="padding-left: 40px;position: relative;"
           href="">颅颌面科诊区</a>
        <a style="padding-left: 40px;position: relative;"
           href="">整形外科诊区</a>
        <a style="padding-left: 40px;position: relative;"
           href="">医学美容中心</a>
    </div>
    <div id="d5">
<el-row gutter="10">
    <el-col style="margin: 10px 0" span="5" v-for="p in protoArry">
        <div style="float: right">
        <a href=""><el-card style="width: 238px;height: 368px">
            <img class="l1" :src="p.url"width="200px"height="254px">
            <p style="color:#444444;font-size: 14px;text-align: center">{{p.name}}</p>
            <p style="font-size: 14px;color: #666666;margin: 0 10px 0 10px">{{p.title}}</p>
        </el-card>
        </a>
        </div>
    </el-col>
</el-row>
    </div>
    <el-footer style="padding: 0;height: 310px;">
        <div style="margin:30px 15%;">
            <el-row>
                <div style="margin-top: 40px">
                <el-col span="12" style="text-align: left;line-height: 25px;">
                    <p>传真：xxx-xxxxxxxx</p>
                    <p>邮箱：xxxxx@xxx.com</p>
                    <p>邮编：xxxxxxx</p>
                    <p>地址：xxxxxxxxxxxxxx</p>
                </el-col>
                </div>
                <el-col span="12">
                    <el-row style="overflow: unset">
                        <div style="margin-top: 10px">
                        <el-col span="8" style="text-align: center"><img src="imgs/qcode_gy.png"><br>京海龙龙美容整形<br>医院微官网</el-col>
                        <el-col span="8" style="text-align: center"><img src="imgs/qcode_gy.png"><br>京海龙龙美容整形<br>医院订阅号</el-col>
                        <el-col span="8" style="text-align: center"><img src="imgs/qcode_gy.png"><br>京海龙龙美容整形<br>医院服务号</el-col>
                        </div>
                    </el-row>
                </el-col>
            </el-row>
            <el-divider></el-divider>
            <h5 style="text-align: center;font-weight: normal">备案号：陕ICP备19005307号 Copyright © 龙龙美容整形医院 版权所有</h5>
        </div>

    </el-footer>
</div>
</body>
<!-- import Vue before Element -->
<script src="https://cdn.staticfile.org/vue/2.6.14/vue.min.js"></script>
<!-- import JavaScript -->
<script src="https://cdn.staticfile.org/element-ui/2.15.9/index.min.js"></script>
<script>
 let v = new Vue({
    el: '#app',
    data: function() {
      return {
        activeIndex2:'1',
          protoArry:[{name:"郭树忠",title:"擅长耳部整形、鼻部整形、乳房再造和整形美容、",url:"imgs/c1.jpg"},
              {name:"郭树忠",title:"擅长眼周整形及年轻化手术治疗私密手术及注射 假体隆乳，脂肪填充",url:"imgs/c2.jpg"},
              {name:"郭树忠",title:"擅长假体隆胸、脂肪隆胸、复合隆胸、问题隆胸修复、巨乳缩小",url:"imgs/c3.jpg"},
              {name:"郭树忠",title:"擅长烧创伤及手术后增生性瘢痕、瘢痕疙瘩的个体化综合性治疗",url:"imgs/c4.jpg"},
              {name:"郭树忠",title:"擅长耳部整形吸脂塑形及脂肪移植，皮肤浅表肿瘤切除修复",url:"imgs/c5.jpg"},
              {name:"郭树忠",title:"擅长烧伤、手足外伤、急慢性创面修复",url:"imgs/c6.jpg"},
              {name:"郭树忠",title:"皮肤病损切除及美容修复、瘢痕整形等。",url:"imgs/c7.jpg"},
              {name:"郭树忠",title:"擅长各种烧烫伤、冻伤、电击伤、各种体表肿物切除",url:"imgs/c8.jpg"},
              {name:"郭树忠",title:"软组织缺损修复、腋臭根治术、压疮、糖尿病足病",url:"imgs/c9.jpg"}]
      }
    },
   methods:{
        index(){
            location.href="";
        }
   }
  })
</script>
</html>